<template>
  <div class="dashboard-container">
    <!-- 快捷功能卡片 -->
    <div class="quick-actions-section">
      <div class="quick-actions-grid">
        <div 
          v-for="(action, index) in quickActions" 
          :key="index"
          class="quick-action-card"
          @click="handleQuickAction(action)"
        >
          <div class="card-icon">
            <i :class="`fa fa-${action.icon}`"></i>
          </div>
          <div class="card-content">
            <h3>{{ action.title }}</h3>
            <span class="card-arrow">→</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计图表区域 -->
    <div class="charts-section">
      <!-- 近30天费用占比 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>近30天费用占比</h3>
          <div class="refresh-btn" @click="refreshData">
            <i class="fa fa-refresh"></i>
          </div>
        </div>
        <div class="chart-content">
          <div class="chart-container">
            <div ref="costChart" class="chart"></div>
          </div>
          <div class="chart-legend">
            <div class="total-amount">
              <span class="amount">{{ costRatio.total.toLocaleString() }}</span>
              <span class="label">总金额</span>
            </div>
            <div class="legend-items">
              <div 
                v-for="item in costRatio.items" 
                :key="item.name"
                class="legend-item"
              >
                <span class="legend-dot" :style="{ backgroundColor: getItemColor(item.name) }"></span>
                <span class="legend-name">{{ item.name }}</span>
                <span class="legend-value">{{ item.value.toFixed(2) }}</span>
                <span class="legend-percentage">{{ item.percentage.toFixed(2) }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 缴费类型 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3>缴费类型</h3>
        </div>
        <div class="chart-content">
          <div class="chart-container">
            <div ref="paymentChart" class="chart"></div>
          </div>
          <div class="chart-legend">
            <div class="total-amount">
              <span class="amount">{{ paymentType.total.toLocaleString() }}</span>
              <span class="label">总金额</span>
            </div>
            <div class="legend-items">
              <div 
                v-for="item in paymentType.items" 
                :key="item.name"
                class="legend-item"
              >
                <span class="legend-dot" :style="{ backgroundColor: item.color }"></span>
                <span class="legend-name">{{ item.name }}</span>
                <span class="legend-value">{{ item.value.toLocaleString() }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 设备状态统计和租户信息表格 -->
    <div class="bottom-section">
      <!-- 设备状态统计 -->
      <div class="device-status-section">
        <div class="device-status-grid">
          <div class="device-status-card">
            <div class="device-icon">
              <i class="fa fa-wifi"></i>
            </div>
            <div class="device-info">
              <h4>采集网关</h4>
              <div class="status-info">
                <span class="online">在线数量：{{ deviceStatus.gateway.online }}</span>
                <span class="offline">离线数量：{{ deviceStatus.gateway.offline }}</span>
              </div>
            </div>
          </div>

          <div class="device-status-card">
            <div class="device-icon">
              <i class="fa fa-signal"></i>
            </div>
            <div class="device-info">
              <h4>4G模块</h4>
              <div class="status-info">
                <span class="online">在线数量：{{ deviceStatus.fourG.online }}</span>
                <span class="offline">离线数量：{{ deviceStatus.fourG.offline }}</span>
              </div>
            </div>
          </div>

          <div class="device-status-card">
            <div class="device-icon">
              <i class="fa fa-bolt"></i>
            </div>
            <div class="device-info">
              <h4>电表数量</h4>
              <div class="status-info">
                <span class="online">在线数量：{{ deviceStatus.electric.online }}</span>
                <span class="offline">离线数量：{{ deviceStatus.electric.offline }}</span>
              </div>
            </div>
          </div>

          <div class="device-status-card">
            <div class="device-icon">
              <i class="fa fa-tint"></i>
            </div>
            <div class="device-info">
              <h4>水表数量</h4>
              <div class="status-info">
                <span class="online">在线数量：{{ deviceStatus.water.online }}</span>
                <span class="offline">离线数量：{{ deviceStatus.water.offline }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 租户信息表格 -->
      <div class="tenant-table-section">
        <div class="table-header">
          <h3>更多</h3>
          <div class="table-actions">
            <button class="btn-more">更多 →</button>
          </div>
        </div>
        <div class="table-container">
          <table class="tenant-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>租户名称</th>
                <th>余额</th>
                <th>预缴金额</th>
                <th>费控金额</th>
                <th>充值时间</th>
                <th>是否欠费</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(tenant, index) in tenantList" :key="tenant.id">
                <td>{{ index + 1 }}</td>
                <td>{{ tenant.tenantName }}</td>
                <td>{{ tenant.balance }}</td>
                <td>{{ tenant.prepaidAmount }}</td>
                <td>{{ tenant.feeAmount }}</td>
                <td>{{ tenant.chargeTime }}</td>
                <td>{{ tenant.status }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      quickActions: [
        { title: '充值缴费', icon: 'credit-card', path: '/finance/recharge' },
        { title: '一键开户', icon: 'user-plus', path: '/tenant/account' },
        { title: '账单查询', icon: 'file-text', path: '/finance/records' },
        { title: '电表管理', icon: 'bolt', path: '/device/electric' },
        { title: '水表管理', icon: 'tint', path: '/device/water' },
        { title: '保电管理', icon: 'shield', path: '/system/charge-plan' }
      ],
      costRatio: {
        total: 16112.90,
        items: [
          { name: '聚合', value: 0.00, percentage: 0.00 },
          { name: '微信', value: 0.00, percentage: 0.00 },
          { name: '支付宝', value: 0.00, percentage: 0.00 },
          { name: '现金', value: 0.00, percentage: 100.00 },
          { name: '银联', value: 0.00, percentage: 0.00 }
        ]
      },
      paymentType: {
        total: 16112.90,
        items: [
          { name: '预存', value: 19327.00, color: '#ff6b35' },
          { name: '退费', value: 19327.00, color: '#4285f4' }
        ]
      },
      deviceStatus: {
        gateway: { online: 112, offline: 4 },
        fourG: { online: 112, offline: 4 },
        electric: { online: 112, offline: 4 },
        water: { online: 112, offline: 4 }
      },
      tenantList: []
    }
  },
  mounted() {
    this.loadDashboardData()
    this.initCharts()
  },
  methods: {
    async loadDashboardData() {
      try {
        const res = await this.$api.dashboard_statistics()
        if (res.code === 0) {
          this.costRatio = res.data.costRatio
          this.paymentType = res.data.paymentType
          this.deviceStatus = res.data.deviceStatus
        }
        
        // 加载租户监控数据
        const tenantRes = await this.$api.tenant_monitor_list({ page: 1, limit: 10 })
        if (tenantRes.code === 0) {
          this.tenantList = tenantRes.data.page.list
        }
      } catch (error) {
        console.error('加载首页数据失败:', error)
      }
    },
    
    initCharts() {
      this.$nextTick(() => {
        this.initCostChart()
        this.initPaymentChart()
      })
    },
    
    initCostChart() {
      const chart = echarts.init(this.$refs.costChart)
      const option = {
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['50%', '50%'],
          data: this.costRatio.items.map(item => ({
            name: item.name,
            value: item.value,
            itemStyle: {
              color: this.getItemColor(item.name)
            }
          })),
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
    },
    
    initPaymentChart() {
      const chart = echarts.init(this.$refs.paymentChart)
      const option = {
        series: [{
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['50%', '50%'],
          data: this.paymentType.items.map(item => ({
            name: item.name,
            value: item.value,
            itemStyle: {
              color: item.color
            }
          })),
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
    },
    
    getItemColor(name) {
      const colors = {
        '聚合': '#e91e63',
        '微信': '#00bcd4',
        '支付宝': '#ff9800',
        '现金': '#4caf50',
        '银联': '#9c27b0'
      }
      return colors[name] || '#666'
    },
    
    handleQuickAction(action) {
      if (action.path) {
        this.$router.push(action.path)
      }
    },
    
    refreshData() {
      this.loadDashboardData()
      this.initCharts()
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 快捷功能卡片 */
.quick-actions-section {
  margin-bottom: 30px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.quick-action-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.card-icon i {
  color: white;
  font-size: 20px;
}

.card-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.card-arrow {
  color: #667eea;
  font-size: 18px;
  font-weight: bold;
}

/* 统计图表区域 */
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.refresh-btn {
  cursor: pointer;
  color: #667eea;
  padding: 5px;
}

.chart-content {
  display: flex;
  align-items: center;
}

.chart-container {
  width: 200px;
  height: 200px;
}

.chart {
  width: 100%;
  height: 100%;
}

.chart-legend {
  flex: 1;
  margin-left: 30px;
}

.total-amount {
  text-align: center;
  margin-bottom: 20px;
}

.total-amount .amount {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.total-amount .label {
  color: #666;
  font-size: 14px;
}

.legend-items {
  space-y: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
}

.legend-name {
  flex: 1;
  color: #333;
}

.legend-value {
  margin-right: 10px;
  color: #666;
}

.legend-percentage {
  color: #666;
}

/* 底部区域左右布局 */
.bottom-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  margin-bottom: 30px;
}

/* 设备状态统计 */
.device-status-section {
  /* 移除原有的 margin-bottom */
}

.device-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.device-status-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.device-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.device-icon i {
  color: white;
  font-size: 24px;
}

.device-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.status-info span {
  font-size: 14px;
}

.online {
  color: #4caf50;
}

.offline {
  color: #f44336;
}

/* 租户信息表格 */
.tenant-table-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: fit-content;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.btn-more {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-size: 14px;
}

.table-container {
  overflow-x: auto;
}

.tenant-table {
  width: 100%;
  border-collapse: collapse;
}

.tenant-table th,
.tenant-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.tenant-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.tenant-table td {
  color: #666;
}

.tenant-table tr:hover {
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .chart-content {
    flex-direction: column;
  }
  
  .chart-legend {
    margin-left: 0;
    margin-top: 20px;
  }
  
  .bottom-section {
    grid-template-columns: 1fr;
  }
  
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

